<template>
	<view class="container">
		<view class="top_tips" v-if="recordDetail.applicationInfoReasonFlag == 1">
			<view class="tips_left">
				<view class="tips_hot">审核意见：</view>
				<view class="tips_text">{{recordDetail.applyStudioProgressVos[0].applicationInfoReason}}</view>
			</view>
		</view>
		<!-- <view class="studio_info">
			挂靠工作室：
			<image class="studio_info_img" :src="studioDetail.avatar" mode=""></image>
			<text>{{studioDetail.name}}</text>
		</view> -->
		<view class="content_box" v-if="commpoentName=='personalInfo'">
			<view class="user_info_from">
				<view class="from_title">
					<view class="from_title_name">个人基本信息</view>
					<view class="from_title_tips">为保证审核顺利进行，请认真填写并确保信息的真实性。</view>
				</view>

				<view class="from_item">
					<view class="from_item_label"><text>*</text>真实姓名</view>
					<view class="from_item_value">
						<input type="text" v-model="fromData.realName" placeholder="输入真实姓名" maxlength="15"
							:adjust-position="true" placeholder-style="color: #CACCCC" @blur="realNameBlur"
							@confirm="realNameConfirm" />
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>身份证号 </view>
					<view class="from_item_value">
						<input type="idcard" v-model="fromData.idCard" placeholder="输入身份证号" maxlength="18"
							:adjust-position="true" placeholder-style="color: #CACCCC" @blur="idCardBlur"
							@confirm="idCardConfirm" />
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>年龄</view>
					<view class="from_item_value from_item_value_phone">
						<input type="number" v-model="fromData.age" placeholder="输入年龄" maxlength="3"
							:adjust-position="true" placeholder-style="color: #CACCCC" @blur="ageBlur"
							@confirm="ageConfirm" />
						<view class="">岁</view>
					</view>
				</view>
				<view class="from_item ">
					<view class="from_item_label from_item_label_sex"><text>*</text>性别</view>
					<view class="from_item_value from_item_value_sex">
						<view @tap="sexBtn(0)" :class="fromData.sex === 0 ? 'from_item_value_sex_act' : '' ">女
						</view>
						<view @tap="sexBtn(1)" :class="fromData.sex === 1 ? 'from_item_value_sex_act' : '' ">男
						</view>
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>手机号</view>
					<view class="from_item_value from_item_value_phone">
						<view class="from_item_value_phone_number">{{fromData.phone}}</view>
						<view class="from_item_value_phone_btn" @tap="openRegisterPopup">更换</view>
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>微信号</view>
					<view class="from_item_value">
						<input type="text" v-model="fromData.wxNumber" placeholder="输入微信号" maxlength="20"
							:adjust-position="true" placeholder-style="color: #CACCCC" @blur="wxNumberBlur"
							@confirm="wxNumberConfirm" />
					</view>
				</view>
			</view>
			<!-- #ifndef APP -->
			<view class="user_info_from">
				<view class="from_title">
					<view class="from_title_name"><text>*</text>上传本人手持身份证照片</view>
				</view>
				<view class="up_idcard">
					<image @tap="upidCardAvatar" :class="fromData.idCardAvatar ? '' : 'up_idcard_add_icon'"
						:src="fromData.idCardAvatar ? fromData.idCardAvatar : url + 'icon-85.png'" mode="">
					</image>
					<image @tap.stop="delImg" v-if="fromData.idCardAvatar" class="del_img" :src="url + 'icon-100.png'"
						mode=""></image>
				</view>
				<view class="up_idcard_see" @tap="openExampleImg">查看示例<uni-icons type="right" size="14"></uni-icons>
				</view>
				<view class="up_idcard_tips">
					<view class="up_idcard_tips_title">注意事项：</view>
					<view class="up_idcard_tips_text">1、手持身份证置于胸前，双手手臂完整露出;不要遮挡住面部特征。</view>
					<view class="up_idcard_tips_text">2、认证人面部及身份证信息清晰可见，照片放大后，字迹清晰、无模糊。</view>
				</view>
			</view>
			<!-- #endif -->


			<view class="bottom_btn">
				<view class="" @tap="getUserInfo">下一步</view>
			</view>
		</view>

		<view class="content_box" v-if="commpoentName=='lookafterPetInfo'">
			<view class="from_box">
				<view class="from_card">
					<view class="from_title">
						<view class="from_title_name">服务意向</view>
						<view class="from_title_tips">选择可提供服务类型与您的位置。</view>
					</view>
					<view class="from_item">
						<view class="from_item_label"><text>*</text>服务类型</view>
						<view class="from_item_value" @tap="openServiceTypePopup">
							<text
								:class="[petServiceTypeText ?'from_item_text_act' : '']">{{petServiceTypeText ? petServiceTypeText : '选择可提供的服务类型'}}</text>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					</view>
					<view class="from_item">
						<view class="from_item_label"><text>*</text>接单地址</view>
						<view class="from_item_value from_item_value_addressTemporary" @tap="openMap">
							<text
								:class="['address_text' , addressTemporary ?'from_item_text_act' : '']">{{addressTemporary ? addressTemporary : '选择地址'}}</text>
							<image class="address_icon" :src="url + 'icon-92.png'" mode=""></image>
						</view>
					</view>
					<view class="from_item">
						<view class="from_item_label ">详细地址</view>
						<view class="from_item_value from_item_value_address">
							<textarea v-model="fromData.address" :adjust-position="true"
								placeholder="无需重复省市区,填写如楼栋、门牌号,请勿填写小区等地址信息" placeholder-style="color: #CACCCC"
								cursor-color="var(--color-primary)" @blur="addressBlur" @confirm="addressConfirm" />
						</view>
					</view>
					<view class="from_item">
						<view class="from_item_label"><text>*</text>接单范围</view>
						<view class="from_item_value from_item_value_experienceYear">
							<input type="number" v-model="fromData.orderTakingRange" placeholder="请填写" maxlength="3"
								:adjust-position="true" placeholder-style="color: #CACCCC" @blur="orderTakingRangeBlur"
								@confirm="orderTakingRangeConfirm" />
							<text class="from_item_value_right">km</text>
						</view>
					</view>
				</view>

				<view class="from_card">
					<view class="from_title">
						<view class="from_title_name">养宠经历</view>
						<view class="from_title_tips">填写您的养宠经历方便工作室更了解你。</view>
					</view>
					<view class="from_item">
						<view class="from_item_label"><text>*</text>养宠时间</view>
						<view class="from_item_value from_item_value_experienceYear">
							<input type="number" v-model="fromData.experienceYear" placeholder="填写1~99的整数，不足1年填1"
								maxlength="2" :adjust-position="true" placeholder-style="color: #CACCCC"
								@blur="experienceYearBlur" @confirm="experienceYearConfirm" />
							<text class="from_item_value_right">年</text>
						</view>
					</view>
					<view class="from_item">
						<view class="from_item_label"><text>*</text>陪宠经验</view>
						<view class="from_item_value" @tap="openApplyPetPopup">
							<text
								:class="[fromData.experienceType || fromData.experienceType === 0 ?'from_item_text_act' : '']">{{fromData.experienceType || fromData.experienceType === 0 ? applyPet[fromData.experienceType].name :'选择您的陪宠经验'}}</text>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					</view>
				</view>
				<view class="from_card">
					<view class="from_title">
						<view class="from_title_name"><text>*</text>养宠照片</view>
						<view class="from_title_tips">图片不超过3M，不超过5张。</view>
					</view>
					<view class="from_up_img">
						<template v-if="imgPetList">
							<view class="img_list" v-for="(imgItem,imgIndex) in imgPetList" :key="imgIndex">
								<image @tap="delImgS(imgIndex,1)" class="del_icon" :src="url + 'icon-100.png'" mode="">
								</image>
								<image @tap="preview(imgItem)" class="img_list_imgs" :src="imgItem" mode=""></image>
							</view>
						</template>

						<view class="add_up_img" v-if="imgPetList.length < 5" @tap="upImg(1)">
							<image class="" :src="url + 'icon-97.png'" mode=""></image>
						</view>

					</view>
				</view>
				<view class="from_card">
					<view class="from_title">
						<view class="from_title_name">养宠介绍&养宠技能</view>
						<view class="from_title_tips">申请通过后将会展示在您的陪宠师个人主页，请认真填写。</view>
					</view>
					<view class="from_item_skill">
						<textarea v-model="fromData.skill" name="" id=""
							placeholder="请描述:养宠经历、喂养方式、宠物现状、养宠技能、护理医疗技能、上门喂猫/遛狗经验等。" maxlength="200"
							cursor-color="var(--color-primary)" placeholder-style="color: #CACCCC;" @blur="skillBlur"
							@confirm="skillConfirm"></textarea>

						<view class="text_length">{{fromData.skill.length || 0}}/200</view>
					</view>
				</view>

				<view class="from_card">
					<view class="from_title">
						<view class="from_title_name">补充说明</view>
						<view class="from_title_tips">图片不超过3M，不超过10张。</view>
					</view>
					<view class="from_up_img">
						<template v-if="imgList">
							<view class="img_list" v-for="(imgItem,imgIndex) in imgList" :key="imgIndex">
								<image @tap="delImgS(imgIndex,2)" class="del_icon" :src="url + 'icon-100.png'" mode="">
								</image>
								<image @tap="preview(imgItem)" class="img_list_imgs" :src="imgItem" mode=""></image>
							</view>
						</template>

						<view class="add_up_img" v-if="imgList.length < 10" @tap="upImg(2)">
							<image class="" :src="url + 'icon-97.png'" mode=""></image>
						</view>

					</view>
				</view>
				<view class="bottom_btn">
					<view class="" @tap="getLookafter">提交</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popupRef" :type="popupType" :is-mask-click="false" border-radius="24rpx"
			background-color="#fff">
			<view v-if="popupContentType.popupExampleImgRef.show" class="register example">
				<view class="register-title">手持身份证示例</view>
				<uni-icons @click="closeExamplePopup()" class="close" type="closeempty" size="28"></uni-icons>
				<image class="sfz_img" :src="url + 'sfz.png'" mode=""></image>
			</view>
			<view v-if="popupContentType.popupRegisterRef.show" class="register">
				<view class="register-title">绑定手机号</view>
				<uni-icons @click="closeRegisterPopup()" class="close" type="closeempty" size="28"></uni-icons>
				<view class="register-mobile">
					<view class="code">
						<span>+86</span>
					</view>
					<input v-model="registerObj.mobile" type="number" maxlength="11" :adjust-position="true"
						:focus="true" placeholder="请输入手机号" />
				</view>
				<view class="register-code">
					<input v-model="registerObj.code" type="number" maxlength="6" placeholder="请输入验证码" />
					<view class="send">
						<view v-if="!registerObj.yzmShow" @click="registerObj.sendApiCode(registerObj.time)">发送验证码
						</view>
						<view v-else style="color: #7C807F;">{{registerObj.time}}s 秒</view>
					</view>
				</view>
				<view @tap="register" class="xjs-btn-primary">确定</view>
			</view>
			<view v-if="popupContentType.popupRef.show" class="popu_box">
				<textarea v-model="popupText" name="" id="" placeholder="" maxlength="200"
					placeholder-style="color: #CACCCC" @blur="skillBlur" @confirm="skillConfirm"></textarea>

				<view class="text_length">{{popupText.length || 0}}/200</view>
				<view class="popu_btn">
					<view class="xjs-btn-primary btn_box" @tap="closePopup(false)"> 取消</view>
					<view class="xjs-btn-primary" @tap="closePopup(true)"> 确定</view>
				</view>
			</view>
			<view v-if="popupContentType.popupFaceRef.show" class="popu_face_box">
				<view class="face_title">认证说明</view>
				<view class="face_tips">为确保当前操作为本人，我们将对您进行人脸识别用于验证身份的真实性。</view>
				<view class="face_tips">点击【同意认证】则表示本人同意我们根据以上方式，使用和收集您的身份资料用于实人认证。</view>
				<view class="face_popu_btn">
					<view class="btn_box" @tap="closeFacePopup(false)"> 暂不认证</view>
					<view class="xjs-btn-primary" @tap="closeFacePopup(true)"> 同意认证</view>
				</view>
			</view>
			<view v-if="popupContentType.popupApplyPetRef.show" class="apply_pet">
				<view class="apply_pet_title">选择照顾宠物经验</view>
				<view class="apply_pet_list">
					<view :class="fromData.experienceType === applyPetItem.type ? 'apply_pet_act': ''"
						v-for="(applyPetItem,applyPetIndex) in applyPet" :key="applyPetIndex"
						@tap="applyPetBtn(applyPetItem.type)">{{applyPetItem.name}}
					</view>
				</view>
				<view @tap="closeApplyPetPopup" class="xjs-btn-primary">确定</view>
			</view>
			<view v-if="popupContentType.popupServiceTypeRef.show" class="apply_pet">
				<view class="apply_pet_title"><text>选择服务类型（可多选）</text><uni-icons @tap="closeServiceTypePopup(false)"
						type="closeempty" size="15"></uni-icons></view>
				<view class="apply_pet_list">

					<template v-for="(serviceItem,serviceIndex) in petServiceType" :key="serviceIndex">
						<view :class="serviceItem.isSelected ? 'apply_pet_act' :'' " @tap="serviceTypeBtn(serviceIndex)"
							v-if="serviceItem.isShow == true">{{serviceItem.name}}
						</view>
					</template>
				</view>
				<view @tap="closeServiceTypePopup(true)" class="xjs-btn-primary">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, onMounted, computed, ref } from 'vue'
	import lookafterPetInfo from './commponents/lookafterPetInfo.vue'
	import personalInfo from './commponents/personalInfo.vue'
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import config from '@/config/index'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { accredit } from '@/hooks/useAppPermission/index';
	const { userInfo, access_token } = useUserStoreToRefs()
	const pictureOfSelf = ref('');
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	let fromData = reactive<{
		userId ?: string | number
		realName ?: string
		idCard ?: number | string
		age ?: string | number
		sex ?: string | number
		phone ?: string | number
		wxNumber ?: string | number
		idCardAvatar ?: string
		serviceType ?: any
		province ?: string
		city ?: string
		area ?: string
		locationAddress ?: string
		address ?: string
		experienceYear ?: string | number
		experienceType ?: string | number
		skill ?: string
		latitudeLongitude ?: string
		additionalRemark ?: string
		joinedStudioId : string | number
		status : string | number
		id : string | number
		petRaisingPic : string,
		orderTakingRange : string | number
	}>({
		id: '',
		userId: userInfo.value.id,
		status: 0,
		joinedStudioId: userInfo.value.refereeStudioId,
		realName: '',
		idCard: '',
		age: '',
		sex: '',
		phone: userInfo.value.phone,
		wxNumber: '',
		idCardAvatar: '',
		serviceType: '',
		address: '',
		province: '',
		city: '',
		area: '',
		locationAddress: '',
		experienceYear: '',
		experienceType: '',
		skill: '',
		latitudeLongitude: '',
		additionalRemark: '',
		petRaisingPic: '',
		orderTakingRange: ''
	})
	const isSubBtn = ref(true)
	const personalInfoRef = ref()
	const lookafterPetInfoRef = ref()
	const popupRegisterRef = ref()
	const popupExampleImgRef = ref()
	const commpoentName = ref('personalInfo') /*lookafterPetInfo */
	const studioId = ref('')
	const recordId = ref('')
	const popupRef = ref()
	const popupType = ref('center')
	const popupFaceRef = ref()
	const popupContentType = reactive({
		popupRegisterRef: {
			show: false,
			type: "center"
		},
		popupExampleImgRef: {
			show: false,
			type: "center"
		},
		popupRef: {
			show: false,
			type: "center"
		},
		popupApplyPetRef: {
			show: false,
			type: "bottom"
		},
		popupServiceTypeRef: {
			show: false,
			type: "bottom"
		},
		popupFaceRef: {
			show: false,
			type: "center"
		}
	})
	const popupApplyPetRef = ref()
	const popupServiceTypeRef = ref()
	const popupText = ref('')
	const imgList = ref([])
	const imgPetList = ref([])
	const addressObject = ref()
	const addressTemporary = ref('')
	const applyPet = ref([
		{ name: '现在养宠、有上门服务经验', type: 0 },
		{ name: '现在养宠、无上门服务经验', type: 1 },
		{ name: '曾经养宠、有上门服务经验', type: 2 },
		{ name: '曾经养宠、无上门服务经验', type: 3 }
	])
	const petServiceType = ref([
		{ name: '上门喂养', type: 1, isShow: true, isSelected: false },
		{ name: '上门遛狗', type: 2, isShow: true, isSelected: false },
		{ name: '基础清洁', type: 3, isShow: true, isSelected: false },
	])
	const petServiceTypeText = ref('')
	const recordDetail = ref({})
	onLoad(async (options) => {

		if (options.recordId) {
			recordId.value = options.recordId

			await getRecordDetail()
		} else {
			Object.assign(fromData, uni.getStorageSync('apply_pet_teacher'))
			addressTemporary.value = fromData.province + fromData.city + fromData.area + fromData.locationAddress
			let petServiceTypeTextArr = []
			petServiceType.value.forEach((item, index) => {
				if (fromData.serviceType.indexOf(item.type) > -1) {
					petServiceTypeTextArr.push(item.name)
					petServiceType.value[index].isSelected = true
				}
			})
			petServiceTypeText.value = petServiceTypeTextArr.join('、')
			petServiceTypeText.value = petServiceTypeTextArr.join('、')
			console.log('fromData.additionalRemark', fromData.additionalRemark)
			console.log('fromData.petRaisingPic', fromData.petRaisingPic)
			if (fromData.additionalRemark) {
				imgList.value = fromData.additionalRemark.split(',')
			}
			if (fromData.petRaisingPic) {
				imgPetList.value = fromData.petRaisingPic.split(',')

			}
		}
		uni.setStorageSync('pictureOfSelf', '')
		/* if (options.id) {
			fromData.joinedStudioId = options.id
			await getStudio(fromData.joinedStudioId)
		} */

	})
	onShow(() => {
		uni.$once('commitCheck', (data) => {
			addressObject.value = data
			addressTemporary.value = data.province + data.city + data.district + data.name + data.address
			fromData.latitudeLongitude = data.location
			fromData.province = data.province
			fromData.city = data.city
			fromData.area = data.district
			fromData.locationAddress = data.name + data.address
		});
		pictureOfSelf.value = uni.getStorageSync("pictureOfSelf")
		console.log(pictureOfSelf.value)
	})
	onUnload(() => {
		uni.setStorageSync('apply_pet_teacher', fromData);
		/* uni.setStorage({
			data: fromData,
			key: 'apply_pet_teacher'
		}) */
	})
	const getRecordDetail = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/apply-studio-record/getApplyInfo/${recordId.value}`
		})
		recordDetail.value = res.data
		/* studioDetail.value.name = res.data.studio.name
		studioDetail.value.avatar = res.data.studio.avatar */
		studioId.value = res.data.studio.id
		Object.assign(fromData, res.data)
		fromData.idCard = res.data.showIdCard
		if (res.data.status == 2) {
			fromData.status = 0
		} else if (res.data.status == 4) {
			fromData.status = 5
		}
		addressTemporary.value = res.data.province + res.data.city + res.data.area + res.data.locationAddress
		let petServiceTypeTextArr = []
		petServiceType.value.forEach((item, index) => {
			if (res.data.serviceType.indexOf(item.type) > -1) {
				petServiceTypeTextArr.push(item.name)
				petServiceType.value[index].isSelected = true
			}
		})
		petServiceTypeText.value = petServiceTypeTextArr.join('、')
		petServiceTypeText.value = petServiceTypeTextArr.join('、')
		if (res.data.additionalRemark) {
			imgList.value = res.data.additionalRemark.split(',')
		}
		if (fromData.petRaisingPic) {
			imgPetList.value = fromData.petRaisingPic.split(',')
		}


	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	const registerObj = reactive<any>({
		mobile: "",
		code: "",
		time: 60,
		yzmShow: false,
		ttuserInfo: {},
		sendApiCode: async () => {
			if (!parseInt(registerObj.mobile)) {
				uni.showToast({
					title: '请输入11位手机号码',
					icon: 'none'
				});
				return false
			}
			let mobileReg = /^1[3456789]\d{9}$/
			if (!mobileReg.test(registerObj.mobile)) {
				uni.showToast({
					title: '手机号格式有误',
					icon: 'none'
				});
				return false
			}
			const res : any = await api({
				method: 'get',
				url: `/mobile/code/v2?mobile=${registerObj.mobile}&type=register&countryCode=86&isVoiceCode=0&sourceType=1`
			})
			if (res.code !== 0) {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: res.msg
				})
			} else {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: "验证码已发送，请注意查收"
				})
				registerObj.sendCode(registerObj.time)
			}
		},
		sendCode: (num) => {
			registerObj.yzmShow = true
			setTimeout(() => {
				if (registerObj.time <= 0) {
					registerObj.yzmShow = false
					registerObj.time = 60
					return
				} else {
					registerObj.time--
					registerObj.sendCode(num)
				}
			}, 1000)
		}
	})
	const isrealNameCheck = ref(false)
	const isUserImgCheck = ref(false)
	const goUserImg = ref(false)
	const openRegisterPopup = () => {
		popupContentType.popupRegisterRef.show = true
		popupType.value = 'center'
		popupRef.value.open()
	}
	const closeRegisterPopup = () => {

		popupContentType.popupRegisterRef.show = false
		popupRef.value.close()
	}
	const openExampleImg = () => {
		popupContentType.popupExampleImgRef.show = true
		popupType.value = 'center'
		popupRef.value.open()
	}
	const closeExamplePopup = () => {
		popupContentType.popupExampleImgRef.show = false
		popupRef.value.close()
	}
	const realNameConfirm = ({ detail: { value } } : any) => {
		fromData.realName = value
	}
	const realNameBlur = ({ detail: { value } } : any) => {
		fromData.realName = value
	}
	const idCardConfirm = ({ detail: { value } } : any) => {
		fromData.idCard = value
		getIdCardInfo(fromData.idCard)
	}
	const idCardBlur = ({ detail: { value } } : any) => {
		fromData.idCard = value
		getIdCardInfo(fromData.idCard)
	}
	const register = async () => {
		if (!parseInt(registerObj.mobile)) {
			uni.showToast({
				title: '请输入11位手机号码',
				icon: 'none'
			});
			return false
		}
		let mobileReg = /^1[3456789]\d{9}$/
		if (!mobileReg.test(registerObj.mobile)) {
			uni.showToast({
				title: '手机号格式有误',
				icon: 'none'
			});
			return false
		}
		if (registerObj.mobile == fromData.phone) {
			uni.showToast({
				title: '请输入不同的手机号',
				icon: 'none'
			});
			return false
		}
		if (registerObj.code.trim().length <= 0) {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: "请输入6位数验证码"
			})
			return
		}
		const res : any = await api({
			method: 'post',
			url: `/mall/user/v2/checkVerificationCode`,
			data: {
				code: registerObj.code,
				mobile: registerObj.mobile,
				countryCode: "86",
			}
		})
		if (res.data == true) {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: "更换成功！"
			})
			fromData.phone = registerObj.mobile
			popupRegisterRef.value.close()
			registerObj.code = ''
			registerObj.mobile = ''
		} else {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: res.msg
			})
		}
	}
	const isValidChineseID = (id) => { //身份证校验
		if (!/^\d{18}$/.test(id)) {
			return false;
		}
		const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
		const checkCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
		let sum = 0;
		for (let i = 0; i < 17; i++) {
			sum += parseInt(id[i], 10) * weights[i];
		}
		const mod = sum % 11;
		return checkCode[mod] === id[17].toUpperCase();
	}
	const getIdCardInfo = (id) => {
		if (!isValidChineseID(fromData.idCard)) {
			return null;
		}
		fromData.sex = parseInt(id[16], 10) % 2 === 0 ? 0 : 1; // 根据性别码的最后一位奇偶判断性别
		var myDate = new Date();
		var month = myDate.getMonth() + 1;
		var day = myDate.getDate();
		var age = myDate.getFullYear() - id.substring(6, 10) - 1;
		if (id.substring(10, 12) < month || id.substring(10, 12) == month && id.substring(12, 14) <= day) {
			age++;
		}
		fromData.age = age
	}
	const ageConfirm = ({ detail: { value } } : any) => {
		fromData.age = value
	}
	const ageBlur = ({ detail: { value } } : any) => {
		fromData.age = value

	}
	const sexBtn = (value) => {
		fromData.sex = value
	}
	const wxNumberConfirm = ({ detail: { value } } : any) => {
		fromData.wxNumber = value
	}
	const wxNumberBlur = ({ detail: { value } } : any) => {
		fromData.wxNumber = value
	}

	const upidCardAvatar = () => {
		if (fromData.idCardAvatar) {
			let images = [fromData.idCardAvatar]
			uni.previewImage({
				current: 0,
				urls: images,
			});
		} else {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["camera", "album"], //从相册选择
				success: function (res) {
					uploadImage(res.tempFilePaths[0])
				}
			})
		}

	}
	const uploadImage = (filePath) => {
		uni.uploadFile({
			url: config.api + '/api/mall/studio/apply-studio-record/uploadCoverPic',
			filePath: filePath,
			name: 'file',
			header: {
				'Authorization': access_token.value ? 'Bearer ' + access_token.value :
					'Basic bWFsbC1hcHA6bWFsbC1hcHA=',
				'x-flow-id': new Date().getTime(),
				"x-client-id": ""
			},
			success: async (uploadFileRes) => {
				fromData.idCardAvatar = JSON.parse((uploadFileRes.data)).data
			},
			fail: (error) => {
				console.error(error);
			}
		})
	}

	const delImg = () => {
		uni.showModal({
			title: '确定要删除吗',
			success: async (res) => {
				if (res.confirm) {
					fromData.idCardAvatar = ''
				} else if (res.cancel) {

				}
			}
		})
	}
	const realNameCheck = async () => {

		const res : any = await api({
			method: 'POST',
			url: `/mall/studio/apply-studio-record/checkIdCard?name=${fromData.realName}&cardNumber=${fromData.idCard}`

		})
		if (res) {
			isrealNameCheck.value = res.data
			console.log(isrealNameCheck.value)
		}
	}



	const serviceTypeBtn = (index : number) => {
		petServiceType.value[index].isSelected = petServiceType.value[index].isSelected == true ? false : true
	}
	const openMap = () => {
		uni.navigateTo({
			url: '/pages/map/index/index'
		})
	}
	const openPopup = () => {
		popupContentType.popupRef.show = true
		popupType.value = 'center'
		popupRef.value.open()
		popupText.value = fromData.skill
		//popupRef.value.open('')
	}
	const closePopup = (type : any) => {
		popupContentType.popupRef.show = false
		if (type) {
			fromData.skill = popupText.value
		}
		popupRef.value.close()
	}
	const openApplyPetPopup = () => {
		popupContentType.popupApplyPetRef.show = true
		popupType.value = 'bottom'
		popupRef.value.open()
		//popupApplyPetRef.value.open()
	}
	const closeApplyPetPopup = () => {
		popupContentType.popupApplyPetRef.show = false
		popupRef.value.close()
	}
	const openFacePopup = () => {
		popupContentType.popupFaceRef.show = true
		popupRef.value.open()
	}
	const closeFacePopup = (type) => {
		popupContentType.popupFaceRef.show = false
		popupRef.value.close()
		if (type) {
			uni.navigateTo({
				url: '/pages/petsOrder/identifyFace/index'
			})
		}
	}
	const applyPetBtn = (type) => {
		fromData.experienceType = type
		console.log(fromData.experienceType)
	}
	const addressBlur = ({ detail: { value } } : any) => {
		fromData.address = value
	}
	const addressConfirm = ({ detail: { value } } : any) => {
		fromData.address = value
	}
	const orderTakingRangeBlur = ({ detail: { value } } : any) => {
		fromData.orderTakingRange = value
	}
	const orderTakingRangeConfirm = ({ detail: { value } } : any) => {
		fromData.orderTakingRange = value
	}
	const openServiceTypePopup = () => {
		popupContentType.popupServiceTypeRef.show = true
		popupType.value = 'bottom'
		popupRef.value.open()
	}
	const closeServiceTypePopup = (type) => {
		if (type == true) {
			petServiceTypeText.value = ''
			let petServiceTypeTextArr = []
			let petServiceTypeNumberArr = []
			petServiceType.value.forEach((item) => {
				if (item.isSelected) {
					petServiceTypeTextArr.push(item.name)
					petServiceTypeNumberArr.push(item.type)
				}
			})
			petServiceTypeText.value = petServiceTypeTextArr.join('、')
			fromData.serviceType = petServiceTypeNumberArr.join(',')

		}
		popupContentType.popupServiceTypeRef.show = false
		popupRef.value.close()
	}
	const experienceYearConfirm = ({ detail: { value } } : any) => {
		fromData.experienceYear = value
	}
	const experienceYearBlur = ({ detail: { value } } : any) => {
		fromData.experienceYear = value
	}
	const skillBlur = ({ detail: { value } } : any) => {
		fromData.skill = value
	}
	const skillConfirm = ({ detail: { value } } : any) => {
		fromData.skill = value
	}
	const upImg = (type) => {
		let countNum
		if (type == 1) {
			countNum = 5
			if (imgPetList.value) {
				countNum = 5 - imgPetList.value.length
			}

		} else if (type == 2) {
			countNum = 10
			if (imgList.value) {
				countNum = 10 - imgList.value.length
			}
		}
		uni.chooseImage({
			count: countNum,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

			sourceType: ["album"], //从相册选择
			success: (res) => {
				console.log(res.tempFiles)
				let result = JSON.parse(JSON.stringify(res.tempFiles)).filter(item => {
					if (item.size > 3145728) {
						return item
					}
				})
				if (result.length > 0) {
					return toastfnc('请选择大小不超过3M的图片~')
				}
				uploadImageS(res.tempFilePaths, type)
			}
		})
	}
	const uploadImageS = (filePath, type) => {
		filePath.forEach((item, index) => {
			uni.uploadFile({
				url: config.api + '/api/mall/studio/apply-studio-record/uploadCoverPic',
				filePath: item,
				name: 'file',
				header: {
					'Authorization': access_token.value ? 'Bearer ' + access_token.value :
						'Basic bWFsbC1hcHA6bWFsbC1hcHA=',
					'x-flow-id': new Date().getTime(),
					"x-client-id": ""
				},
				success: async (uploadFileRes) => {
					if (type == 1) {
						imgPetList.value = imgPetList.value.concat(JSON.parse((uploadFileRes.data)).data)
						fromData.petRaisingPic = imgPetList.value.join(',')

					} else if (type == 2) {
						imgList.value = imgList.value.concat(JSON.parse((uploadFileRes.data)).data)
						fromData.additionalRemark = imgList.value.join(',')
					}

				},
				fail: (error) => {
					console.error(error);
				}
			})
		})

	}
	const preview = (imgUrl) => {
		let images = [imgUrl]
		console.log(images, 'images')
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	const delImgS = (delIndex, type) => {
		console.log(delIndex)
		if (type == 1) {
			imgPetList.value.splice(delIndex, 1)
			fromData.petRaisingPic = imgPetList.value.join(',')
		} else if (type == 2) {
			imgList.value.splice(delIndex, 1)
			fromData.additionalRemark = imgList.value.join(',')
		}

	}
	const userImgCheck = async () => {
		const res : any = await api({
			method: 'GET',
			url: `/mall/order/order-detail/confirmArrival/faceIdentify/V2`,
			data: {
				faceUrl: pictureOfSelf.value,
				idCard: fromData.idCard,
				realName: fromData.realName
			}

		})
		if (res) {
			isUserImgCheck.value = res.data
			if (!isUserImgCheck.value) {
				uni.setStorageSync('pictureOfSelf', '')
				pictureOfSelf.value = ''
			}
		}
	}
	const getUserInfo = async () => {

		await realNameCheck()
		console.log(userInfo.value.phone)
		if (!fromData.realName) {
			return toastfnc('请输入真实姓名')
		}
		if (!fromData.idCard) {
			return toastfnc('请输入身份证号')
		}
		if (!fromData.age) {
			return toastfnc('请输入年龄')
		}
		if (Number(fromData.sex) < 0) {
			return toastfnc('请选择性别')
		}
		if (!fromData.wxNumber) {
			return toastfnc('请输入微信号')
		}
		if (!isrealNameCheck.value) {
			return toastfnc('身份证号与姓名不匹配')
		}

		// #ifdef APP 

		const status = await accredit('CAMERA')
		if (status != 1) return
		const status2 = await accredit('RECORD_AUDIO')
		if (status2 != 1) return
		if (!pictureOfSelf.value || !isUserImgCheck.value) {
			if (!pictureOfSelf.value && !isUserImgCheck.value) {
				openFacePopup()
				return
			}
			await userImgCheck()
			if (!isUserImgCheck.value) {
				return toastfnc('人脸识别不通过,请确认身份信息是否一致')
			}

		}
		//  #endif 
		// #ifndef APP
		if (!fromData.idCardAvatar) {
			return toastfnc('请上传本人手持身份证照')
		}
		//  #endif 

		commpoentName.value = 'lookafterPetInfo'
		scrollToTop()
	}
	const getLookafter = async () => {
		if (!isSubBtn.value) { return }

		if (!fromData.serviceType) {
			return toastfnc('请选择可提供服务类型')
		}
		if (!fromData.locationAddress) {
			return toastfnc('请完善接单地址')
		}
		if (fromData.orderTakingRange == '') {
			return toastfnc('请填写接单范围')
		}
		if (!fromData.experienceYear) {
			return toastfnc('请填写养宠经验')
		}
		if (Number(fromData.experienceType) < 0) {
			return toastfnc('请填写照顾宠物经验')
		}
		/* if (!fromData.skill) {
			return toastfnc('请填写养宠经理&养宠技能')
		} */
		if (fromData.petRaisingPic.length < 0) {
			return toastfnc('请上传养宠照片')
		}
		fromData.additionalRemark = imgList.value.join(',')
		fromData.petRaisingPic = imgPetList.value.join(',')
		isSubBtn.value = false
		let methodText = 'POST'
		if (recordId.value) {
			methodText = fromData.joinedStudioId == studioId.value ? 'PUT' : 'POST'
		}
		if (methodText == 'POST') {
			fromData.id = ''
			fromData.status = 0
		}
		const res : any = await api({
			method: methodText,
			url: `/mall/studio/apply-studio-record`,
			data: {
				id: fromData.id,
				userId: fromData.userId,
				status: fromData.status,
				joinedStudioId: fromData.joinedStudioId,
				realName: fromData.realName,
				idCard: fromData.idCard,
				age: fromData.age,
				sex: fromData.sex,
				phone: fromData.phone,
				wxNumber: fromData.wxNumber,
				idCardAvatar: fromData.idCardAvatar,
				serviceType: fromData.serviceType,
				address: fromData.address,
				province: fromData.province,
				city: fromData.city,
				area: fromData.area,
				locationAddress: fromData.locationAddress,
				experienceYear: fromData.experienceYear,
				experienceType: fromData.experienceType,
				skill: fromData.skill,
				latitudeLongitude: fromData.latitudeLongitude,
				additionalRemark: fromData.additionalRemark,
				petRaisingPic: fromData.petRaisingPic,
				orderTakingRange: fromData.orderTakingRange
			}
		})
		if (res.code == 0) {
			uni.removeStorageSync('apply_pet_teacher');
			/* uni.removeStorage({
				key: 'apply_pet_teacher'
			}); */
			let recordIdText = recordId.value ? `?id=${recordId.value}` : ''
			uni.navigateTo({
				url: `/pages/applyPetTeacher/submitInfo/submitSuccess${recordIdText}`
			})
		} else if (res.code == 1) {
			toastfnc(res.msg + '，即将返回首页！')
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}, 2000)

		} else {
			toastfnc(res.msg)
			isSubBtn.value = true
		}
	}
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: 'none'
		})

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		height: 100%;
	}

	.top_tips {
		width: 100%;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E4E6E6;
		box-sizing: border-box;
		line-height: 1;
		background-color: #fff;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10;

		.tips_left {
			display: flex;
			color: #FF6084;

			.tips_hot {
				margin-right: 8rpx;
				font-size: 24rpx;
			}

			.tips_text {
				width: 520rpx;
				font-size: 26rpx;
			}
		}
	}

	.studio_info {
		width: 686rpx;
		margin: 0 auto;
		padding-top: 34rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #7C807F;

		image {
			margin-right: 16rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 12rpx;
		}

		text {
			font-size: 30rpx;
			color: #1B2120;
		}
	}

	.content_box {
		margin: 0 auto;
		width: 686rpx;
		background-color: #F9F6F6;
		padding-bottom: calc(var(--safe-area-bottom) + 104rpx + 80rpx);
	}

	.user_info_from {
		padding: 48rpx 32rpx;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		line-height: 1;

		.from_title {

			.from_title_name {
				margin-bottom: 16rpx;
				font-size: 36rpx;
				color: #1B2120;
				font-weight: bold;

				text {
					color: #FF6084;
				}
			}

			.from_title_tips {
				font-size: 24rpx;
				color: #7C807F;
			}
		}

		.from_item {
			margin-top: 64rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 1;

			.from_item_label {
				width: 138rpx;
				color: #1B2120;
				font-weight: bold;

				text {
					color: #FF6084;
				}
			}

			.from_item_label_sex {
				padding-top: 16rpx;
			}

			.from_item_value {
				padding-bottom: 24rpx;
				width: 460rpx;
				border-bottom: 2rpx solid #E4E6E6;
				color: #1B2120;

				input {
					margin-top: -8rpx;
					line-height: 1;
				}
			}

			.from_item_value_phone {
				display: flex;
				justify-content: space-between;

				.from_item_value_phone_number {}

				.from_item_value_phone_btn {
					color: #FF6084;
				}
			}

			.from_item_value_sex {
				display: flex;
				align-items: center;

				view {
					margin-right: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 70rpx;
					box-sizing: border-box;
					border: 1rpx solid #CACCCC;
					background-color: #fff;
					border-radius: 200rpx;
				}

				.from_item_value_sex_act {
					border: 1rpx solid #FF6084;
					color: #FF6084;
				}
			}


		}


		.up_idcard {
			width: 622rpx;
			height: 394rpx;
			background-color: #F9F6F6;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				width: 622rpx;
				height: 394rpx;
			}

			.del_img {
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				width: 32rpx;
				height: 30rpx;
			}

			.up_idcard_add_icon {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.up_idcard_see {
			margin: 18rpx 0 64rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #1B2120;
			font-weight: bold;

		}

		.up_idcard_tips {
			font-size: 24rpx;
			color: #7C807F;

			.up_idcard_tips_title {
				margin-bottom: 18rpx;
				font-weight: bold;
			}

			.up_idcard_tips_text {
				line-height: 1.4;
			}
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(var(--safe-area-bottom));
		line-height: 1;
		z-index: 99;

		view {
			width: 622rpx;
			margin: 8rpx auto;
			padding: 30rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 62rpx;
			text-align: center;
		}
	}

	.register {
		// padding: 0 40rpx calc(var(--safe-area-bottom) + 5rpx);
		padding: 0 40rpx 60rpx;
		box-sizing: border-box;
		position: relative;
		width: 686rpx;
		background-color: #fff;
		border-radius: 24rpx;

		image {
			width: 100%;
		}

		&-title {
			text-align: center;
			font-weight: bold;
			padding: 40rpx 0 80rpx;
		}

		.close {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}

		&-mobile {
			height: 128rpx;
			border-radius: 32rpx;
			background-color: #F5F6F7;
			display: flex;
			align-items: center;
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;

			.code {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			>input {
				font-size: 32rpx;
				margin-left: 32rpx;
			}
		}

		&-code {
			height: 128rpx;
			border-radius: 32rpx;
			background-color: #F5F6F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 80rpx;

			>input {
				font-size: 32rpx;
				margin-left: 32rpx;
				width: 300rpx;
			}

			.send {
				font-size: 26rpx;
				color: var(--color-primary);
				width: 180rpx;
				text-align: center;
				border-left: 1px solid #7C807F;
			}
		}
	}

	.popu_face_box {
		width: 686rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.face_title {
			margin-bottom: 24rpx;
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: bold;
			text-align: center;
		}

		.face_tips {
			margin-bottom: 24rpx;
			font-size: 30rpx;
			line-height: 1.4;
			color: #1A1A1A;
		}

		.face_popu_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 40%;
			}

			.btn_box {
				line-height: 88rpx;
				text-align: center;
				border-radius: 62rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #FF6084;
				border: 2rpx solid #FF6084;
			}
		}
	}

	.from_box {}

	.from_card {
		padding: 48rpx 32rpx;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		line-height: 1;

		.from_title {

			.from_title_name {
				margin-bottom: 16rpx;
				font-size: 36rpx;
				color: #1B2120;
				font-weight: bold;

				text {
					color: #FF6084
				}
			}

			.from_title_tips {
				font-size: 24rpx;
				color: #7C807F;
			}
		}

		.from_item {
			margin-top: 64rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 1;

			.from_item_label {
				width: 138rpx;
				color: #1B2120;
				font-weight: bold;

				text {
					color: #FF6084;
				}
			}

			.from_item_value {
				margin-top: -2rpx;
				padding-bottom: 24rpx;
				width: 460rpx;
				border-bottom: 2rpx solid #E4E6E6;
				color: #CACCCC;
				display: flex;
				justify-content: space-between;

				.from_item_value_right {
					color: #1B2120;
				}

				input {
					width: 90%;
					margin-top: -14rpx;
					line-height: 1;
					color: #1B2120;
				}

				textarea {
					height: 80rpx;
					color: #1B2120;
				}

				.address_text {
					width: 400rpx;
				}

				.address_icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.from_item_value_experienceYear {
				display: flex;
				align-items: center;

				input {
					margin-top: -6rpx;
					line-height: 1;
				}

				margin: 0;
			}

			.from_item_value_addressTemporary {
				margin-top: -4rpx;
				line-height: 1.4;
			}

			.from_item_value_address {
				margin-top: -4rpx;
				line-height: 1.4;

				textarea {
					margin: -14rpx 0 0 -10rpx;
					width: 100%;
				}
			}

			.from_item_textarea {

				line-height: 1.4;
				margin-top: -16rpx;
				border-radius: 16rpx;
				background-color: #F9F6F6;
				box-sizing: border-box;
				padding: 32rpx;
				color: #CACCCC;
				width: 622rpx;
				word-break: break-all;
			}

			.from_item_text_act {
				color: #1B2120;
			}



		}

		.from_item_skill {
			margin-top: 48rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #F9F6F6;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			height: 400rpx;

			textarea {
				width: 100%;
				line-height: 1.4;
			}

			.text_length {
				text-align: right;
			}
		}

		.from_up_img {
			padding: 32rpx 0 0 0;
			display: flex;
			flex-wrap: wrap;

			.img_list {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				position: relative;

				.del_icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}

				.img_list_imgs {
					width: 160rpx;
					height: 213rpx;
					border-radius: 4rpx;
				}
			}

			.add_up_img {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F9F6F6;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.popu_box {
		background-color: #fff;
		height: 70vh;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin-bottom: 48rpx;
		font-size: 30rpx;
		color: #1B2120;

		textarea {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #F5F6F7;
			border-radius: 32rpx;
			height: 80%;
			line-height: 1.4;
		}

		.text_length {
			margin: 24rpx 0;
			display: flex;
			justify-content: flex-end;
		}
	}

	.popu_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 46%;
			//border-radius: 20rpx;
		}
	}



	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(var(--safe-area-bottom));
		line-height: 1;
		z-index: 99;

		view {
			width: 622rpx;
			margin: 8rpx auto;
			padding: 30rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 62rpx;
			text-align: center;
		}
	}

	.apply_pet {
		padding: 0 32rpx;

		box-sizing: border-box;
		line-height: 1;

		.apply_pet_title {
			padding-top: 48rpx;
			padding-bottom: 24rpx;
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: bold;
			text-align: center;

			text {
				margin-right: 100rpx;
			}
		}

		.apply_pet_list {
			padding-bottom: 48rpx;

			view {
				margin-top: 40rpx;
				width: 686rpx;
				height: 92rpx;
				line-height: 92rpx;
				box-sizing: border-box;
				background-color: #F5F6F7;
				text-align: center;
				font-size: 30rpx;
				color: #5C5E5E;
				border-radius: 400rpx;
			}

			.apply_pet_act {
				border: 2rpx solid #FF6084;
				background-color: #fff;
				color: #FF6084;
			}
		}
	}
</style>